<template>
    <div class="star" :class="starType">
        <span v-for="(itemClass,index) in itemClasses" :key="index" :class="itemClass" class="star-item"></span>
    </div>
</template>

<script>
const LENGTH = 5;
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';
export default {
    props: {
        size: {
            type: Number
        },
        score: {
            type: Number
        }
    },
    computed: {
        starType () {
            return 'star-' + this.size;
        },
        itemClasses () {
            let result = [];
            let score = Math.floor(this.score * 2) / 2;
            let hasDecimal = score % 1 !== 0;
            let integer = Math.floor(score);
            for (let i = 0; i < integer; i++) {
                result.push(CLS_ON);
            }
            if (hasDecimal) {
                result.push(CLS_HALF);
            }
            while (result.length < LENGTH) {
                result.push(CLS_OFF);
            }
            return result;
        }
    }
}
</script>

<style lang='stylus' scoped>
    @import '../../common/stylus/mixin.styl'
    .star
        font-size : 0
        .star-item
            display : inline-block
            background-repeat : no-repeat
        &.star-48
            .star-item
                width : 20px
                height : 20px
                margin-right : 22px
                background-size : 20px 20px
                &.last-child
                    margin-right : 0
                &.on
                    bg-image('star48_on')
                &.half
                    bg-image('star48_half')
                &.off
                    bg-image('star48_off')
        &.star-36
            .star-item
                width : 15px
                height : 15px
                margin-right : 6px
                background-size : 15px 15px
                &.last-child
                    margin-right : 0
                &.on
                    bg-image('star36_on')
                &.half
                    bg-image('star36_half')
                &.off
                    bg-image('star36_off')
        &.star-24
            .star-item
                width : 10px
                height : 10px
                margin-right : 3px
                background-size : 10px 10px
                &.last-child
                    margin-right : 0
                &.on
                    bg-image('star24_on')
                &.half
                    bg-image('star24_half')
                &.off
                    bg-image('star24_off')
</style>>
